<template>
  <div ref="charts">
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: {}
    }
  },
  mounted() {

    this.$api.getDeptNumber().then(res => {
      this.result = res
      this.init()

    })
  },
  methods: {
    init() {
      var data = this.result.deptName;
      var value = this.result.res2;
      var arr = new Array(value.length).fill(Math.max.apply(null, value));
      const option = {
        title: {
          text: '部门人数统计',
          left: 'center'
        },
        backgroundColor: '#FFF',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          data: data,
          position: 'bottom',
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ECF1F6',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 0,
            fontSize: 12,
            color: '#3A3A3C',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ECF1F6', '#ECF1F6'],
              width: 0,
              type: 'dashed',
            },
          },
          gridIndex: 0,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 0,
            fontSize: 12,
            color: '#6E7D9C',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ECF1F6', '#ECF1F6'],
              width: 1,
              type: 'dashed',
            },
          },
        },
        series: [{
          //背景柱状图
          type: 'bar',
          barWidth: '32',
          barGap: '-100%',
          animation: false,
          itemStyle: {
            normal: {
              borderWidth: 0,
              barBorderRadius: [8, 8, 0, 0],
              color: '#faa537',
            },
          },
          data: value,
          z: 0,
        },

        {
          //辅助分割图形

          type: 'pictorialBar',
          barWidth: '110%',
          symbol: 'rect',
          symbolRotate: '-15', //倾斜度
          symbolMargin: '80%', //控制分割图形的大小
          symbolSize: ['100%', 4],
          symbolRepeat: true,
          animation: false,
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: '#FFF',
            },
          },
          label: {
            normal: {
              color: '#fff',
              show: true,
              position: ['100%', '45%'],
              fontSize: 22,
              fontWeight: 'bold',
              show: false
            },
          },
          data: arr,
          z: 1,
        },
        ],
      };

      const mychart = this.$echarts.init(this.$refs.charts)
      mychart.setOption(option)
    }

  }
}
</script>

<style>
</style>